<template>
	<view>
		<div class="card">
		  <div class="card__skeleton card__title"></div>
		  <div class="card__skeleton card__description">         </div>
		</div>
	</view>
</template>

<script>
	export default {
		name:"loading",
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped lang="scss">
.card {
  width: 44rem;
  padding:1.45rem 3rem;
  text-align: center;
  border-radius: .8rem;
  background-color: white;
  transform:scale(1.5) ;
  margin:120px auto;
  box-shadow: 0 1px 30px 0 #eee;
}
.card__skeleton {
  background-image: linear-gradient(
		1010deg,
		#f7f7f7 0px,
		rgb(229 229 229 / 90%) 40px,
		#f9f9f9 500px
	);
  background-size: 300%;
  background-position: 100% 0;
  border-radius: inherit;
  animation: shimmer 1.5s infinite;
}

.card__title {
  height:35px;
  margin-bottom: 15px;
}

.card__description {
  height:300px;
}

@keyframes shimmer {
  to {
    background-position: -100% 0;
  }
}

</style>